<template>
  <el-cascader
    :show-all-levels="false"
    :options="tree"
    :props="{value:'user',label:'name',expandTrigger: 'hover',disabled:'disabled'}"
    v-model="val"
    :disabled="disabled"
    clearable
    @change="$emit('change','user',$event[$event.length-1])"
  />
</template>
<script>
// import name from "./name";
export default {
  // components: { name},
  props: ["disabled"],
  watch: {
    "$gd.userType"() {
      this.setTree();
    },
    val(a) {
      console.log(this.$cp(a));
    }
  },
  data() {
    return {
      tree: [],
      val: [],
      gd: this.$gd
    };
  },
  // computed() {return{}},
  created() {
    this.setTree();
  },
  methods: {
    tst(a, b) {
      console.log(a, b);
    },
    setTree() {
      if (this.$gd) {
        let t = this.$tree2arr(
          this.$gd.userType.arr2tree().getItem({ id: this.$gd.me.userType })
        ).map(a => {
          a.children = [];
          return a;
        });
        let i = -1;
        let u = {};

        this.$gd.users.map(e => {
          i = t.getItem({ id: e.userType }, true);
          if (i >= 0) {
            u = { id: -1, pid: e.userType, user: e.id, name: e.name };
            t[i].children.push(u);
          }
        });
        t = t.map(a => {
          if (!a.children.length) a.disabled = true;
          return a;
        });
        // console.log(t);
        this.tree = t;
        // this.tree = this.$gd.userType.arr2tree();
        /* this.tree.push({
            id: -1,
            pid: a.userType,
            user: a.id,
            name: a.name
          }); */
      }
    }
  }
};
</script>

<style lang="less" scoped>
</style>
